<template>
  <div>
    <el-container>
      <el-header>
        <span class="title">小区物业管理系统</span>
        &nbsp;|&nbsp;
        <span class="title">重置密码</span>
      </el-header>
      <el-main>
        <div class="steps">
          <el-steps :active="active" finish-status="success">
            <el-step title="输入账号"></el-step>
            <el-step title="输入验证码"></el-step>
            <el-step title="重置密码"></el-step>
          </el-steps>
        </div>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      forget: {
        uname: ""
      },
      rules: {
        uname: [{ required: true, message: "用户名不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
     next() {
        if (this.active++ > 2) this.active = 0;
      }
  },
  created(){
    this.active= parseInt(sessionStorage.getItem("active"));
    console.log(this.active);
  },
  components: {}
};
</script>

<style scoped>
.steps {
  /* border: solid 1px #c71111; */
  height: 100px;
}
.title {
  font-size: 20px;
}
.el-header,
.el-footer {
  /* background-color: #b3c0d1; */
  /* color: #333; */
  text-align: left;
  line-height: 60px;
  width: 50%;
  margin: auto;
}
.el-main {
  /* text-align: center; */
  /* line-height: 600px; */
  width: 50%;
  margin: auto;
  height: 600px;
}
</style>

